<template>
  <div class="home">
    <b-container>
      <img class="img-fluid mb-3" src="http://www.xinde.org/uploadfile/other/prayer/me.jpg" style="width:100%">
      <div class="mb-3">
        <router-link to="/prayeradd">
          <div class="btn btn-danger">我要祈祷</div>
        </router-link>
      </div>
      <div class="card-columns">
        <div class="card" v-for="item in list" :key="item.id">
          <div class="card-body">
            <img class="float-left mr-2" style="max-width: 100px;" :src="'http://www.xinde.org/uploadfile/other/prayer/'+ item.hua_id+'.jpg'" :alt="item.title">
            <h5 class="card-title">意向：{{item.title}}</h5>
            <div class="card-text mb-2">
              <small class="text-muted">
                {{item.name}}
                <br>时间：{{item.create_time*1000 | formatDate}}
              </small>
            </div>
            <p class="card-text">{{item.content}}</p>
          </div>
        </div>
        <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading"></infinite-loading>
      </div>
    </b-container>
    <Footer msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import Footer from "@/components/Footer.vue";
import InfiniteLoading from "vue-infinite-loading";
import { mapState, mapActions } from "vuex";
import { formatDate } from '../util/date.js';

export default {
  name: "prayer",
  components: {
    InfiniteLoading,
    Footer
  },
  data () {
    return {};
  },
  computed: {
    ...mapState("prayer", ["list"])
  },
  created () {
    this.initList()
  },
  methods: {
    ...mapActions("prayer", ["changeList", "intList"]),
    infiniteHandler ($state) {
      this.changeList().then(function (ret) {
        if (ret == 1) {
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    }
  },
  filters: {
    formatDate (time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd');  //显示到日 'yyyy-MM-dd hh:mm' //全部显示
    },
    formatTime (time) {
      var date = new Date(time);
      return formatDate(date, 'hh:mm');    //显示到小时
    },
  },
};
</script>

<style scoped>
@media (min-width: 576px) {
  .card-columns {
    column-count: 1;
  }
}
@media (min-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}
@media (min-width: 1200px) {
  .card-columns {
    column-count: 3;
  }
}
</style>

